<template>
	<view class="common">
		<view class="header">
			<view class="userInfo">
				<view class="photo">
					<image :src="require(`@/static/image/touxiang/${dataList.photo}.png`)"></image>
				</view>
				<text> {{ dataList.name }}</text>
				<view class="medal">
					<image v-if="dataList.sign1 !== ''" :src="require(`@/static/image/sign/${dataList.sign1}.png`)"></image>
					<image v-if="dataList.sign2 !== ''" :src="require(`@/static/image/sign/${dataList.sign2}.png`)"></image>
					<image v-if="dataList.sign3 !== ''" :src="require(`@/static/image/sign/${dataList.sign3}.png`)"></image>
				</view>
			</view>
			<view class="delete">
				<image src="@/static/image/dacha.png"></image>
			</view>
		</view>
		<view class="content">
			<text v-if="dataList.content.sign1 !== ''" class="content-sign1"> {{ dataList.content.sign1.name }} </text>
			<text>
				{{ dataList.content.article }}
			</text>
		</view>
		<view class="content-img">
			<image v-if="dataList.img !== ''" v-for="(item, key) in dataList.img" :src="require(`@/static/image/content/${item.path}.png`)"></image>
		</view>
		<view v-if="dataList.label !== ''" class="label">
			<view class="title">
				<text class="label-icons">#</text>
				<text class="label-contetn">{{ dataList.label.name }}</text>
			</view>
		</view>
		<view class="userBehavior">
			<view class="commons Reprint">
				<view class="num-ico">
					<image src="@/static/image/nav-iocs/zhuanfa.png"></image>
				</view>
				<view class="num">
					<text> {{ dataList.share }} </text>
				</view>
			</view>
			<view class="commons Reprint">
				<view class="num-ico">
					<image src="@/static/image/nav-iocs/pinglun.png"></image>
				</view>
				<view class="num">
					<text> {{ dataList.comment }} </text>
				</view>
			</view>
			<view class="commons Reprint">
				<view class="num-ico">
					<image src="@/static/image/nav-iocs/shang.png"></image>
				</view>
				<view class="num">
					<text> {{ dataList.topUpper }} </text>
				</view>
			</view>
			<view class="aa">
				<view width="40px" height="80px">
					<image src="@/static/image/nav-iocs/xia.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['dataList'],
		data () {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style scoped>
	.common{
		width: 100%;
		height: auto;
		border-top: 2rpx solid #f4f4f4;
		border-bottom: 2rpx solid #f4f4f4;
	}
	.header{
		display: flex;
		width: 100%;
		height: auto;
	}
	.header .userInfo{
		display: flex;
		width: 680rpx;
		height: 100rpx;
	}
	/* 昵称*/
	.header .userInfo text{
		line-height: 100rpx;
		text-indent: 0.5em;
		color: #606060;
	/*	overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;*/
	}
	/* end */
	/* 头像样式 */
	.header .userInfo .photo{
		width: 80rpx;
		height: 80rpx;
		padding: 10rpx;
	}
	.header .userInfo .photo image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	/* end*/
	/* 勋章样式 */
	.header .userInfo .medal{
		flex: 1;
		overflow: hidden;
	}
	.header .userInfo .medal image{
		width: 30rpx;
		height: 30rpx;
		margin: 32rpx 5rpx;
	}
	/* end*/
	/* 删除 */
	.header .delete{
		flex: 1;
		height: 100rpx;
	}
	.header .delete image{
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
	}
	/* 文章部分 */
	.content .content-sign1{
		border: 1px solid #19abf4;
		color: #19abf4;
		font-size: 8rpx;
		border-radius: 5rpx;
		padding: 0 5rpx;
	}
	/* 图片列表 */
	.content-img{
		display: flex;
		width: 100%;
		height: auto;
		padding-bottom: 10rpx;
		flex-wrap: wrap;
	}
	.content-img image{
		width: 230rpx;
		height: 250rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
	/* 图片下的标签卡 */
	.label{
		margin: 20rpx auto;
	}
	.label .title{
		display: flex;
		background-color: #effafc;
		height: 60rpx;
		text-align: right;
		border-radius: 30rpx;
	}
	.label .title text{
		font-weight: bold;
		line-height: 60rpx;
	}
	.label .title .label-content{
		flex: 1;
		color: #fff;
		border-radius: 50%;
		line-height: 50rpx;
		background-color: #18aaf3;
		text-align: center;
	}
	.label .title .label-icons{
		display: block;
		width: 30rpx;
		height: 30rpx;
		color: #fff;
		margin: 15rpx 10rpx 0 20rpx;
		border-radius: 50%;
		line-height: 30rpx;
		background-color: #18aaf3;
		text-align: center;
	}
	/* 用户行为 */
	.userBehavior{
		display: flex;
		width: auto;
		height: 80rpx;
		justify-content: space-around;
		margin: 10rpx 0;
		padding: 0 5%;
	}
	.userBehavior .commons {
		display: flex;
		width: 30%;
		height: 100%;
		justify-content: space-between;
	}
	.userBehavior .commons .num-ico{
		width: 100rpx;
		height: 80rpx;
	}
	.userBehavior .commons image{
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}
	.userBehavior .commons .num{
		flex: 1;
		line-height: 80rpx;
		color: #474747;
	}
	.userBehavior .aa{
		width: 5%;
		height: 100%;
	}
	.userBehavior .aa image{
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}
	/* end */
</style>
